星尘

Echarts Y轴左对齐、X轴文字转向

发表于 更新于 分类于

Y轴左对齐

在开发业务中，有需要要用到Y轴左对齐都需求，虽然问题都不大，但是遇见了就记录下来，方便以后查阅。其中起到关键作用的是”align”: “left”，以及位置的偏移”margin”: 100。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
option= {
  "title": {
    "y": "", 
    "text": "", 
    "subtext": "", 
    "x": ""
  }, 
  "series": [
    {
      "type": "bar", 
      "barMaxWidth": "100", 
      "data": [96, 72, 144, 0, 0, 120, 24, 24, 24, 24, 0, 0, 24, 48, 0, 0, 120, 24, 0, 24, 24, 0, 72, 0], 
      "name": "故障计数", 
      "label": {
        "normal": {
          "position": "right", 
          "show": true
        }
      }
    }
  ], 
  "yAxis": {
    "nameLocation": "middle", 
    "axisTick": {
      "show": false
    }, 
    "type": "category", 
    "axisLabel": {
      "textStyle": {
        "color": "#787878", 
        "align": "left", 
        "fontSize": 10
      }, 
      "interval": 0, 
      "margin": 100, 
      "rotate": ""
    }, 
    "nameTextStyle": {
      "color": "#787878", 
      "fontSize": 10
    }, 
    "nameGap": 35, 
    "axisLine": {
      "lineStyle": {
        "color": "#A6A6A6"
      }
    }, 
    "data": ["风噪声过大", "行驶异响", "底盘异响", "制动力", "制动踏板", "制动噪音", "制动抖动", "机械手刹", "电子手刹EPB", "自动驻车系统AutoHold", "陡坡缓降系统HDC", "四驱系统", "转向系统，方向盘", "车辆跑偏", "车身稳定性", "底盘通过性", "悬挂舒适性", "驾驶辅助系统", "停车辅助系统", "胎压监控系统", "视野", "反光性", "车辆抖动", "没有以上问题"]
  }, 
  "tooltip": {
    "axisPointer": {
      "type": ""
    }
  }, 
  "xAxis": [
    {
      "nameLocation": "middle", 
      "axisTick": {
        "show": false
      }, 
      "splitLine": {
        "lineStyle": {
          "color": "#e9e9e9"
        }
      }, 
      "max": [
        144
      ], 
      "axisLabel": {
        "textStyle": {
          "color": "#787878", 
          "fontSize": 10
        }
      }, 
      "nameTextStyle": {
        "color": "#787878", 
        "fontSize": 10
      }, 
      "nameGap": 35, 
      "axisLine": {
        "show": false
      }, 
      "type": "value"
    }
  ], 
  "toolbox": {}, 
  "legend": {
    "data": [
      "故障计数"
    ]
  }
}

X轴文字转向

X轴文字转向，只需要设置xAxis -> axisLabel -> rotate即可

1
2
3
4
5
6
7
8
"axisLabel": {
      "textStyle": {
        "color": "#787878", 
        "fontSize": 10
      }, 
      "interval": 0, 
      "rotate": -30
    }

如果要将其实现动态化，即后端判断当前文字的多少来设置文字旋转的值，那么就可以使用一个来实现，以Python为例。xaxis_data为x轴的所有文字，传入list后使用\n拼接。（当然判断文字多少的方法不唯一，也可以使用Unicode再用len判断。）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
def get_rotate(xaxis_data):
    def get_word_count(unicode_str):
        count = 0
        for c in unicode_str:
            if ord(c) < 128:
                count += 1
            else:
                count += 2
        return count

    # 如果横轴标签太多或者文字太长，将标签旋转显示
    word_count = get_word_count('\n'.join(xaxis_data))
    if word_count < 170:
        rotate = 0
    elif word_count < 200:
        rotate = -45
    else:
        rotate = -90
    return rotate